<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
        <title><?php echo config_item('site_title'); ?> - Admin</title>
		
		<script src="<?php echo base_url(); ?>application/assets/js/jquery.js"></script>
		<script src="<?php echo base_url(); ?>application/assets/js/jquery-1.6.4.min.js"></script>		
		<script src="<?php echo base_url(); ?>application/jquery/jquery-ui-1.8.13.custom.min.js"></script>
		<script src="<?php echo base_url(); ?>application/assets/js/bootstrap-dropdown.js"></script>
		<link href="<?php echo base_url(); ?>application/jquery/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet">
		
		<link href="<?php echo base_url(); ?>application/assets/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
				padding-top: 60px;
				padding-bottom: 40px;
				background-color: #f5f5f5;
			  }
			  			  
			  #footer {
			   position:fixed;
			   left:0px;
			   bottom:-20px;
			   height:30px;
			   width:100%;
			}
			
        </style>
        <link href="<?php echo base_url(); ?>application/assets/css/bootstrap-responsive.css" rel="stylesheet">

        <script type="text/javascript">
			$(document).ready(function() {
				$('#myModal').on('shown', function(e) {
				    var modal = $(this);

				    modal.css('margin-top', (modal.outerHeight() / 2) * -1)
				         .css('margin-left', (modal.outerWidth() / 2) * -1);

				    return this;
				});


				getCategories();
            });
			
			function getCategories() {
				var baseurl = $("#baseurl").val();
				
				$("#category").html('');				

				$.ajax({         
					url: baseurl  + "Categories/getCategories", 
					type: "POST",
					dataType: "json",					        
					success: function(data) { 
						//alert('received data' + data[0].text);
						if(data.length > 0) {
							$("#category").append("<thead><th>Category</th><th width=\"10px\"></th><th width=\"10px\"></th></thead><tbody>");
							for(i = 0; i < data.length; i++) {
								$("#category").append('<tr><td>' + data[i].text	+ '</td>' + 
									'<td width="10px"><a class="btn btn-mini btn-success" href="javascript:void(0)" onclick="editCategory(\'' + data[i].id + '\',\'' + (data[i].text).replace(/'/g, "\\'").replace(/"/g, "&quot;") + '\',\'' + (data[i].desc).replace(/'/g, "\\'").replace(/"/g, "&quot;") + '\')">edit</a></td>' + 
									'<td width="10px"><a class="btn btn-mini btn-danger" href="javascript:void(0)" onclick="deleteCategory(\'' + data[i].id + '\')">delete</a></td></tr>');
							}
							$("#category").append("</tbody>");								
						} else {
							$("#category").append("<tr><td>No categories configured yet !</td></tr>");
						}
					},
					error:function (xhr, ajaxOptions, thrownError){
						alert('Error while getting categories !');
					}
				});
			}

			function deleteCategory(id) {
				var baseurl = $("#baseurl").val();
				
				if(confirm('Deleting category. Are you sure?') == true) {
					$.ajax({         
						url: baseurl  + "Categories/deleteCategory", 
						type: "POST",
						dataType: "json",	
						data : {id: id},			        
						success: function(data) { 
							//alert('received data ' + data);
							getCategories();
						},
						error:function (xhr, ajaxOptions, thrownError){
							alert('Error while deleting category ' + id);
							alert(xhr.status);
	        				alert(thrownError);
						}
					});
				}				
			}
			
			function editCategory(id,catname,catdesc) {
				var baseurl = $("#baseurl").val();
				
				$("#loading").hide();
				$("#txtCategory").val(catname);
				$("#txtCategoryDescription").val(catdesc);
				$("#categoryid").val(id);
				$('#myModal').modal('show');
			}
			
			function CreateCategoryPopup() {
				$("#loading").hide();
				$("#txtCategory").val('');
				$("#txtCategoryDescription").val('');
				$("#categoryid").val('0');
				$('#myModal').modal('show');
			}
			
			function SaveCategory() {
				var baseurl = $("#baseurl").val();
                var categoryname = $("#txtCategory").val();
                var catdesc = $("#txtCategoryDescription").val();
                var userid = $("#userid").val();
				var catid = $("#categoryid").val();
				
				//alert('desc = ' + catdesc);
				
                if(categoryname != "") {
                    $("#loading").show();
                    
                    $.ajax({         
                        url: baseurl  + 'Categories/saveCategory', 
                        type: 'POST',
                        timeout:4000,
                        dataType: 'json',
                        data: { 
                            'catid':catid,
							'userid': userid,
                            'catname': categoryname,
                            'catdesc':catdesc
                        },         
                        success: function(data) {
                            $("#loading").hide();
                            //alert(data);
                            if (data != null) {
                                $('#myModal').modal('hide');
                                //document.location.reload(true);
								document.location = baseurl + 'Admin';
                            } else {
                                $("#error_message").html("Error saving category !");
                            }                                                               
                        }, error: function (xhr, ajaxOptions, thrownError) {
                            $("#loading").hide();
                            $("#error_message").html("Error saving category !");
                            //alert(xhr.status);
                            //alert(thrownError);
                        }
                    });                
                } else {
                    $("#error_message").html("Please enter category name!");
                    $('#txtCategory').focus();
                }
                return false;
            }			
        </script>
	</head>
	<body>
		<?php
			$sessiondata = $this->session->userdata('username');
			if((isset($sessiondata)) && ($sessiondata != '')) {
			echo getTopNav();
		?>
		
		<div class="container">
                <div class="well">
					<a href="#myModal" role="button" class="btn btn-success" onclick="CreateCategoryPopup()"
					title="Create New Category">Create New</a>
				</div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="well" style="height:400px;">
							
                        	<table id="category" class="table table-hover table-striped"></table>

						</div>
                    </div><!--/span-->
                </div><!--/row-->

                <!-- Include footer -->
                <?php include 'footer.php' ?>
            </div>
			
			<!-- Hidden variables -->
			<input type="hidden" id="baseurl" name="baseurl" value="<?php echo base_url(); ?>" >
			
			<!-- Dialogs -->
            <div class="modal hide fade in" id="myModal" tabindex="-1"
                 role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
                 style="width: 25em">
				<input type="hidden" id="categoryid" name="categoryid" value="0"/>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">&times;</button>
                    <h3 id="myModalLabel"><i class="icon-bullhorn"></i>&nbsp;Create New Category</h3>
                </div>
                <div class="modal-body">
                    <div class="control-group">
                        <div class="controls">
                            <label class="control-label" for="txtCategory"><abbr
                                    title="Category Name">Category</abbr></label>
                            <div class="controls">
                                <input type="text" class="input-xlarge" id="txtCategory"
                                       name="txtCategory" autofocus>
								<span class="help-block text-info">Enter alphanumeric characters only</span>
                            </div>
                        </div>
                        <div class="controls">
                            <label class="control-label" for="txtCategoryDescription"><abbr
                                    title="Short Description">Description</abbr></label>
                            <div class="controls">
                                <textarea class="input-xlarge" id="txtCategoryDescription"
                                          name="txtCategoryDescription" rows="5"></textarea>
								<span class="help-block text-info">Enter alphanumeric characters only</span>
                            </div>
                            <div class="controls">
                                <span id="error_message" class="text-error"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <span id="loading" class="pull-left"><img src="<?php echo base_url(); ?>application/assets/img/loadera16.gif"></span>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button class="btn btn-primary" onclick="SaveCategory()">Save</button>
                </div>
            </div>
			
			<script src="<?php echo base_url(); ?>application/assets/js/bootstrap-modal.js"></script>
	
		 <!-- 
		    ================================================== -->
		 <!-- Placed at the end of the document so the pages load faster -->
		 <script src="<?php echo base_url(); ?>application/assets/js/bootstrap-collapse.js"></script>
	
	<?php
		} else {
			redirect('Login');
		}
	?>
	</body>
	
	<!-- Placed at the end of the document so the pages load faster -->
    
			
</html>
<?php
// @todo: Validate input by removing non-alphanumeric characters
?>